<template>
    <div class="app-container">
        <h4>用户信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
        <tbody>
            <tr>
                <th width="15%">手机号</th>
                <td width="35%"><b>{{ user.phone }}</b></td>
                <th width="15%">用户姓名</th>
                <td width="35%">{{ user.name }}</td>
            </tr>
        <tr>
            <th>状态</th>
            <td>{{ user.status == 0 ? '锁定' : '正常' }}</td>
            <th>注册时间</th>
            <td>{{ user.createTime }}</td>
        </tr>
        </tbody>
        </table>

        <h4>认证信息</h4>
        <table class="table table-striped table-condenseda table-bordered" width="100%">
            <tbody>
            <tr>
                <th width="15%">姓名</th>
                <td width="35%"><b>{{ user.name }}</b></td>
                <th width="15%">证件类型</th>
                <td width="35%">{{ user.certificatesType}}</td>
            </tr>
            <tr>
                <th>证件号</th>
                <td>{{ user.certificatesNo }}</td>
                <th>证件图片</th>
                <td><img :src="user.certificatesUrl" width="80px"></td>
            </tr>
            </tbody>
        </table>

    <h4>就诊人信息</h4>
    <el-table
            v-loading="listLoading"
            :data="patientList"
            stripe style="width: 100%">

            <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
                    {{ scope.$index + 1 }}
            </template>
            </el-table-column>

            <el-table-column prop="name" label="姓名"/>
            <el-table-column prop="certificatesType" label="证件类型"/>
            <el-table-column prop="certificatesNo" label="证件编号"/>
            <el-table-column label="性别">
                <template slot-scope="scope">
                        {{ scope.row.sex == 1 ? '男' : '女' }}
                </template>
            </el-table-column>
            <el-table-column prop="birthdate" label="出生年月"/>
            <el-table-column prop="phone" label="手机"/>
            <el-table-column label="是否结婚">
            <template slot-scope="scope">
                    {{ scope.row.isMarry == 1 ? '是' : '否' }}
            </template>
        </el-table-column>
    <el-table-column prop="address" label="地址"/>
    <el-table-column prop="createTime" label="注册时间"/>
    </el-table>

    <br>
    <el-row>
    <el-button  @click="back">返回</el-button>
    </el-row>
    </div>
</template>
<script>
import userApi from '@/api/user'
export default {
    // 定义数据
    data() {
        return {
            listLoading: '',
            id: this.$route.params.id,
            user: {}, // 会员信息
            patientList: [] // 就诊人列表
        }
    },

    // 当页面加载时获取数据
    created() {
        this.getUserDetail()
    },

    methods: {
        // 根据id查询会员记录
        getUserDetail() {
            userApi.getUserDetail(this.id).then(response => {
                this.user = response.data.user
                this.patientList = response.data.patientList
            })
        },

        back() {
            window.history.back(-1)
        }
    }
}
</script>
